import { View } from 'react-native'
import { StatusBar } from 'react-native'
import { Tabs } from 'expo-router'
import UIConstants from '../../constants/UIConstants'
import FontAwesome5 from '@expo/vector-icons/FontAwesome5'
import Octicons from '@expo/vector-icons/Octicons'


export default function ZhTabLayout() {
    return (
        <Tabs screenOptions={{
            headerTitleAlign: 'center',
            headerTitleStyle: {
                fontSize: 21
            },
            headerTintColor: UIConstants.COLOR_WHITE,
            headerStyle: {
                backgroundColor: UIConstants.COLOR_GREEN,
                height: StatusBar.currentHeight + 49
            },
            tabBarActiveTintColor: UIConstants.COLOR_GREEN,
            tabBarInactiveTintColor: UIConstants.COLOR_GRAY_DARK,
            tabBarStyle: {
                backgroundColor: UIConstants.COLOR_WHITE,
                height: 67,

            },
            tabBarItemStyle: {
                paddingVertical: 8
            },
        }}>
            <Tabs.Screen name="home" options={{
                headerTitle: '智慧社区',
                tabBarLabel: '首页',
                headerRight: () => (
                    <View style={{ marginRight: UIConstants.SPACE_ROW_XL, marginTop: UIConstants.SPACE_ROW_XS }}>
                        <Octicons name="search" size={20} color={UIConstants.COLOR_WHITE} />
                    </View>
                ),
                tabBarIcon: ({ focused, color, size }) => <Octicons name="home" size={size} color={color} />
            }} />
            <Tabs.Screen name="property" options={{
                headerTitle: '物业管理',
                tabBarLabel: '物业',
                tabBarIcon: ({ focused, color, size }) => <FontAwesome5 name="building" size={size} color={color} />
            }} />
            <Tabs.Screen name="community" options={{
                title: '社区',
                tabBarIcon: ({ focused, color, size }) => <Octicons name="people" size={size} color={color} />
            }} />
            <Tabs.Screen name="mine" options={{
                title: '我的',
                tabBarIcon: ({ focused, color, size }) => <Octicons name="person" size={size} color={color} />
            }} />
        </Tabs>
    )
}